<script setup lang="ts">
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
//@ts-ignore,引入顶部搜索框组件
import CustomNavbar from "./components/CustomNavbar.vue";
import CategoryPanel from "./components/CategoryPanel.vue";
import HotPanel from "./components/HotPanel.vue";
//引入骨架屏组件
import Skeleton from "./components/Skeleton.vue";
//@ts-ignore,引入请求函数
import { reqHomeBanner, reqHomeCategory, reqHomeHot } from "@/services/home.ts";
import { ref } from "vue";
//@ts-ignore,引入约束类型
import type { XtxGuessInstance } from "@/components/components.d.ts";
//@ts-ignore
import type { BannerItem, CategoryItem, HotItem } from "@/types/home.ts";
import XtxGuess from "@/components/XtxGuess.vue";

//广告轮播图数据
let bannerList = ref<BannerItem[]>([]);
//分类列表数据
let categoryList = ref<CategoryItem[]>([]);
//热门推荐数据
let hotList = ref<HotItem[]>([]);
//获取Guess组件实例
let GuessRef = ref<XtxGuessInstance>();
//当前页面数据是否在加载(正常页面与骨架屏组件的切换)
let isLoadding = ref(false);

//页面生命周期
onLoad(async ()=>{
  //正在加载数据
  isLoadding.value = true;
  await Promise.all([getHomeBannerList(),getHomeCategoryList(),getHomeHotList()]);
  //加载完毕
  isLoadding.value = false;
})

//获取首页广告轮播图数据
const getHomeBannerList = async () => {
  let res = await reqHomeBanner();
  bannerList.value = res.result;
  console.log("首页广告轮播图数据api",res);
}
//获取前台分类
const getHomeCategoryList = async () => {
  let res = await reqHomeCategory();
  categoryList.value = res.result;
  console.log("前台分类api",res);
}
//获取热门推荐分类
const getHomeHotList = async () => {
  let res = await reqHomeHot();
  hotList.value = res.result;
  console.log("首页热门推荐数据api",res);
}
//滚动条组件滚动触底事件
const onScrolltolower = () => {
  //调用子组件实例的方法
  GuessRef.value?.getGuessLikeList();
}

//scroll-view组件刷新状态
let refresherTriggered = ref(false);
//scroll-view组件下拉刷新事件
const scrollPullDownRefresh = async () => {
  //标记正在刷新
  refresherTriggered.value = true;
  //重新刷新操作
  GuessRef.value?.resetData();  //猜你喜欢数据值回初始值
  await Promise.all([getHomeBannerList(),getHomeCategoryList(),getHomeHotList(),GuessRef.value?.getGuessLikeList()]);
  //关闭下拉刷新标记
  refresherTriggered.value = false;
}

</script>

<template>
  <!-- 自定义导航栏 -->
  <custom-navbar></custom-navbar>
  <scroll-view v-if="!isLoadding" @scrolltolower="onScrolltolower" class="scroll-view" scroll-y :refresher-triggered="refresherTriggered" :refresher-enabled="true" @refresherrefresh="scrollPullDownRefresh">
    <!-- 自定义封装的轮播图组件(全局) -->
    <XtxSwiper :bannerList = "bannerList" />
    <!-- 分类面板组件 -->
    <CategoryPanel :categoryList = "categoryList"></CategoryPanel>
    <!-- 热门推荐组件 -->
    <HotPanel :hotList="hotList"></HotPanel>
    <!-- 猜你喜欢组件(全局) -->
    <XtxGuess ref="GuessRef"></XtxGuess>
  </scroll-view>
  <!-- 骨架屏组件 -->
  <Skeleton v-else></Skeleton>
</template>

<style lang="scss">
page{
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;

  .scroll-view{
    flex:1;
  }
}
</style>
